<template>
    <div>
        <el-table :data="MaterialList" size="small" border stripe :height="tabHeight" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
            <el-table-column label="序号" width="55" align="center">
                <template slot-scope="{ $index }">{{ $index + 1 }}</template>
            </el-table-column>
            <!-- <el-table-column prop="colour" label="调样"></el-table-column> -->
            <el-table-column prop="sku" label="确认" width="55" align="center">
                <template slot-scope="{ row }">
                    <el-checkbox v-model="row.confirm" true-label="1" false-label="0" @click.native.prevent></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column prop="comment" label="备注" width="100" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="sku" label="图片"> </el-table-column> -->
            <el-table-column prop="materiel_major_category" label="物料类型" width="70" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="materiel_minor_category" label="物料分类" width="70" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="materiel_number" label="物料编码" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="materiel" label="物料名称" width="160" show-overflow-tooltip></el-table-column>
            <el-table-column prop="part" label="部位" width="70" show-overflow-tooltip></el-table-column>
            <el-table-column prop="materiel_attribute" width="200" label="属性" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div class="attribute">
                        <div v-for="(item, index) in JSON.parse(row.materiel_attribute)" :key="index">
                            <div>{{ item.name }}</div>
                            <div>{{ item.value }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" width="20" show-overflow-tooltip></el-table-column>
            <el-table-column :label="item.colour" v-for="(item, index) in Colour" :key="index" align="center">
                <template scope="{ row }">
                    <div :style="colorStyle(row,index)">
                        {{
                            (row.colours[index] &&
                                row.colours[index].colours[0] &&
                                row.colours[index].colours[0].value) ||
                            ""
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="materiel_major_unit" label="单位" width="55" show-overflow-tooltip></el-table-column>
            <el-table-column prop="material_details" label="用料详情" width="120">
                <template slot-scope="{ row }">
                    <div>单耗：{{ row.material_details | toFixedTwo }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="material_details" label="缩水率(%)" :width="material_sr_width">
                <template slot-scope="scope">
                    <div v-if="material_sr_edit && material_sr_index == scope.$index">
                        经:<el-input v-model.trim="material_sr_e" size="mini" type="text" style="width: 30%" placeholder="请输入" clearable></el-input>
                        纬:<el-input v-model.trim="material_sr_w" size="mini" type="text" style="width: 30%" placeholder="请输入" clearable></el-input>
                        &nbsp;&nbsp;
                        <template v-if="!loading">
                            <el-tooltip class="item" effect="light" content="提交" placement="top">
                                <el-button type="text" icon="el-icon-check" style="color: green;" @click="submitEditSRBtn(scope.row)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="light" content="取消" placement="top">
                                <el-button type="text" icon="el-icon-close" style="color: red;" @click="closeEditSRBtn"></el-button>
                            </el-tooltip>
                        </template>
                        <template v-else>
                            <el-button type="text" icon="el-icon-loading"></el-button>
                        </template>
                    </div>
                    <div v-else>
                        <span>经：{{!scope.row.material_sr_e ? 0 : scope.row.material_sr_e}}&nbsp;纬：{{!scope.row.material_sr_w ? 0 : scope.row.material_sr_w}}</span>
                        <el-button type="text" style="display: inline-block;margin-left: 10px;" icon="el-icon-edit" @click="openEditSRBtn(scope.$index)"></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="开发单价" width="70" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    {{ row.price | toFixedTwo }}
                </template>
            </el-table-column>
            <el-table-column prop="supplier" label="供应商" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="supplier_contact_name" label="联系人" width="70" show-overflow-tooltip></el-table-column>
            <el-table-column prop="supplier_phone" label="联系方式" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="supplier_address" label="地址" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="materiel_major_unit" label="调样备注"> </el-table-column> -->
            <!-- <el-table-column label="" align="center"> </el-table-column> -->
        </el-table>
    </div>
</template>

<script>
import {postAdminOperateUpdateSR} from "@/api";

export default {
    props: {
        MaterialList: [],
        tabHeight: 0,
        Colour: [],
    },
    data() {
        return {
            loading : false,
            material_sr_index: 0,
            material_sr_edit: false,
            material_sr_e: "", //"缩水率 经"
            material_sr_w: "", //"缩水率 纬"
            material_sr_width:180,
        }
    },
    filters: {
        toFixedTwo(e) {
            return Number(e).toFixed(2);
        },
    },
    mounted() {
        console.log(this.tabHeight);
    },
    methods: {
        //打开修改缩水率输入框
        openEditSRBtn(index){
            this.material_sr_edit = true;
            this.material_sr_index = index;
            this.material_sr_width = 300;
            this.material_sr_e = this.MaterialList[this.material_sr_index].material_sr_e;
            this.material_sr_w = this.MaterialList[this.material_sr_index].material_sr_w;
        },
        //关闭修改缩水率输入框
        closeEditSRBtn(){
            this.material_sr_edit = false;
            this.material_sr_e = "";
            this.material_sr_w = "";
            this.material_sr_width = 180;
        },
        //提交修改的缩水率
        submitEditSRBtn(row){
            if(!/^[0-9-.]+$/.test(this.material_sr_e) || !/^[0-9-.]+$/.test(this.material_sr_w)){
                this.$message.warning("请输入有效内容数字!");
                return;
            }
            this.loading = true;
            let param = {
                style_bom_id:row.id,
                style_id:row.style_id,
                sr: this.material_sr_e+":"+this.material_sr_w
            };
            postAdminOperateUpdateSR(param).then((res)=>{
                this.loading = false;
                if(res.code === 0){
                    this.$set(this.MaterialList[this.material_sr_index], 'material_sr_e', this.material_sr_e);
                    this.$set(this.MaterialList[this.material_sr_index], 'material_sr_w', this.material_sr_w);
                    this.$message.success(res.msg);
                }else{
                    this.$message.warning(res.msg);
                }
                this.closeEditSRBtn();
            });
        },
        headerCellStyle({ column }) {
            let { Colour } = this;
            let index = Colour.map((e) => e.colour).indexOf(column.label);

            if (index != -1) {
                let bgcolor = Number(Colour[index].colour_value).toString(16);
                let rgb = this.hexToRgb("#" + bgcolor);
                let rgbArr = [rgb.r, rgb.g, rgb.b];
                let color = this.resBgColor(rgbArr)
                return {
                    background: "#" + bgcolor,
                    color
                };
            }
            return { background: "#F3F4F7", color: "#555" };
        },
        colorStyle(row,index) {
            if (row.colours[index] && row.colours[index].colours[0] &&row.colours[index].colours[0].code) {
                let bgcolor = Number(row.colours[index].colours[0].code).toString(16)
                bgcolor = bgcolor.length >= 6 ? bgcolor : bgcolor.padStart(6, "0");
                let rgb = this.hexToRgb("#" + bgcolor);
                let rgbArr = [rgb.r, rgb.g, rgb.b];
                let color = this.resBgColor(rgbArr);
                return {
                    background: "#" + bgcolor,
                    color,
                    "text-align": "center"
                };
            }
            return {};
        },
        cellStyle(row, rowIndex) {
            if (row.columnIndex == 9 && row.row.materiel_major_category == "主料") {
                return {
                    background: "red",
                };
            }
        },
        resBgColor(rgbArr) {
            // 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
            // 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff

            var color =
                0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
            return color ? "#000000" : "#ffffff";
        },
        hexToRgb(val) {
            //HEX十六进制颜色值转换为RGB(A)颜色值
            // 16进制颜色值的正则
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            // 把颜色值变成小写
            var color = val.toLowerCase();
            var result = "";
            if (reg.test(color)) {
                // 如果只有三位的值，需变成六位，如：#fff => #ffffff
                if (color.length === 4) {
                    var colorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                    }
                    color = colorNew;
                }
                // 处理六位的颜色值，转为RGB
                var colorChange = [];
                for (var i = 1; i < 7; i += 2) {
                    colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                }
                result = "rgb(" + colorChange.join(",") + ")";
                return {
                    rgb: result,
                    r: colorChange[0],
                    g: colorChange[1],
                    b: colorChange[2],
                };
            } else {
                result = "无效";
                return { rgb: result };
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.attribute {
    width: 320px;
    display: flex;
    flex-wrap: wrap;
    > div {
        border: 1px solid #888080;
        border-radius: 2px;
        overflow: hidden;
        display: flex;
        margin-right: 4px;
        margin-bottom: 2px;
        > div {
            padding: 2px 6px;
        }
        > div:nth-child(1) {
            color: #ffffff;
            background: #888080;
            text-align: center;
        }
    }
}
</style>
